<template>
	<view class="photowall-box w100">
		<view class="photo-box w100">
			<view class="add-photo">
				<up-upload @delete="deletePicTwo" :fileList="fileListTwo" :previewImage="true" mutiple
					@afterRead="afterRead" :maxCount="1" width="200rpx" height="200rpx">
					<view class="upload-box flex-center">
						<up-icon name="camera" color="#999999" size="70rpx"></up-icon>
						<text class='text'>添加照片</text>
					</view>
				</up-upload>
			</view>
			<view class="image-item" v-for="(item,index) in photoInfo.list" :key="item.id" @click="viewImg(item.url)">
				<view class="del-box flex-center" @click.stop="deletePicTwo(item.id)">
					<up-icon name="close" color="#ccc" size="30rpx"></up-icon>
				</view>
				<up-image :show-loading="true" radius="12rpx" :src="item.url" width="200rpx" height="200rpx"></up-image>
			</view>
		</view>
		<template>
			<view class="view-more" v-if="photoInfo.list.length>0" @click="getMoreImg">
				<up-loadmore :status="photoInfo.status"></up-loadmore>
			</view>
			<view class="not-list-view" v-else>
				<text class="text">暂时没有照片墙~</text>
			</view>
		</template>

	</view>
</template>

<script setup>
	const fileListTwo = ref([]);
	const photoWall = ref([]);
	const photoInfo = reactive({
		page: 1,
		list: [],
		status: 'loadmore',
	})
	onLoad(() => {
		getPhotoWall();
	})
	onReachBottom(() => {
		getMoreImg();
	})
	const deletePic = (event) => {
		fileListTwo.value = [];
	}
	const deletePicTwo = async (id) => { //删除照片墙
		uni.showModal({
			title: '提示',
			content: '确定删除此照片？',
			success: async (res) => {
				if (res.confirm) {
					const res = await $Api.assistant.delPhotoWall({
						id: id
					})
					if (res.code == '1') {
						uni.$u.toast('删除成功')
						photoInfo.list = photoInfo.list.filter(item => item.id != id)
					} else {
						uni.$u.toast(res.msg)
					}
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
	const getPhotoWall = async () => { //获取照片墙
		const res = await $Api.assistant.getPhotoWall({
			page: photoInfo.page,
		});
		if (res.code == 1) {
			if (res.data.list && res.data.list.length > 0) {
				let arr = [];
				arr = res.data.list;
				photoInfo.list = [...photoInfo.list, ...arr];
			}
			if (res.data.totalPage > photoInfo.page) {
				photoInfo.status = 'loadmore';
				photoInfo.page++;
			} else {
				photoInfo.status = 'nomore';
			}

		} else {
			uni.$u.toast(res.msg);
		}
	}
	const getMoreImg = () => {
		if (photoInfo.status == 'loading' || photoInfo.status == 'nomore') return;
		photoInfo.status = 'loading';
		setTimeout(() => {
			getPhotoWall();
		}, 300)
	}
	const afterRead = async (event) => {
		let lists = [].concat(event.file);
		let fileListLen = fileListTwo.value.length;
		fileListTwo.value = lists.map((item) => {
			return {
				...event.file,
				status: 'uploading',
				message: '上传中',
			}
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await $Api.uploadFile.uploadFilePromise(lists[i].url); //上传图片
			if (result.code == '1') {
				const res = await $Api.assistant.addPhotoWall({
					url: result.data.fullurl,
				})
				if (res.code == 1) {
					fileListTwo.value = [];
					photoInfo.list.unshift({
						id: res.data.id,
						url: result.data.fullurl,
					})
				} else {
					fileListTwo.value = [{
						...event.file,
						status: 'fail',
						message: '上传失败',
					}];
					uni.$u.toast(res.msg)
				}

			} else {
				fileListTwo.value = [{
					...event.file,
					status: 'fail',
					message: '上传失败',
				}];
				uni.$u.toast(result.msg)
			}
		}

	};
	const viewImg = (img, index) => {
		uni.previewImage({
			urls: [img],
			longPressActions: {
				success: function(data) {},
				fail: function(err) {}
			}
		});
	}

	// watch(() => photoInfo.list, async (newVal) => {
	// }, {
	// 	deep: true,
	// 	immediate: true
	// })
</script>

<style lang="scss" scoped>
	view {
		// border: 1px solid red;
	}

	.photo-box {
		padding: 36rpx 24rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		row-gap: 20rpx;
	}

	.image-item {
		width: 200rpx;
		height: 200rpx;
		border-radius: 12rpx;
		position: relative;

		.del-box {
			position: absolute;
			top: -18rpx;
			right: -18rpx;
			width: 36rpx;
			height: 36rpx;
			background-color: rgba(0, 0, 0, 0.8);
			border-radius: 50%;
			z-index: 99;
		}
	}

	.upload-box {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		background-color: #36393B;
		flex-direction: column;

		.text {
			font-weight: 500;
			font-size: 24rpx;
			margin-top: 16rpx;
			color: rgba(255, 255, 255, 0.3);
		}


	}

	.upload-box {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		background-color: #36393B;
		flex-direction: column;

		.text {
			font-weight: 500;
			font-size: 24rpx;
			margin-top: 16rpx;
			color: rgba(255, 255, 255, 0.3);
		}
	}
</style>